<template>
    <div class="index-wrap">
        <div class="index-left">
            <div class="index-left-block" style="background-color: #ffffff">
                <div class="artwork-category-panel__category-title">
                    作品类别
                </div>

                <span class="allSpan">全部</span>
                <span class="categoryName" v-for="category in categories">
                        <el-divider direction="vertical"></el-divider>
                    <a @click="selectWorkCategories(category)" style="cursor: pointer;color:#222222;text-decoration: none">{{category.categoryName}}</a>
                </span>
                <el-divider></el-divider>
                <div v-for="category in categories">
                    <div class="workTitle">
                        {{category.categoryName}}
                        <br/><br/>
                    </div>
                    <span v-for="category2 in category.categories">
                        <el-tag @click="selectWorkCategories(category2)" class="workItem">{{category2.categoryName}}</el-tag>
                    </span>
                    <el-divider></el-divider>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
  import {selectCategories} from "../assets/api/categoryApi";
  import {onBeforeMount, ref} from "vue";
  
  
  const categories = ref([
    {
      categoryName: '',
      categories: {categoryName: ''}
    }
  ]);
  
  
  const showCategories = () => {
    let data = {};
    selectCategories(data).then((res) => {
      categories.value = res.data;
    })
  };
  const selectWorkCategories = (category) => {
    // this.$router.push({path:this.$route.path, query:{type:}})
    let data = {};
    data.categoryId = category.categoryId.value;
  
  };
  
  onBeforeMount(() => {
    showCategories();
  });
    
</script>

<style scoped>
    .index-wrap {
        width: 1200px;
        margin: 0 auto;
    }

    .index-left {
        float: left;
        text-align: left;
        font-size: 14px;
        color: #4a4a4a;
        margin-bottom: 15px;
    }

    .index-left-block {
        margin: 15px;
        width: 300px;
        box-shadow: 0 0 1px #ddd;
    }


    .workTitle{
        font-size: 12px;
        color: #9b9b9b;
        margin-left: 10px;
    }

    .artwork-category-panel__category-title {
        font-size: 14px;
        color: #4a4a4a;
        margin-bottom: 15px;
        font-weight: 700;
        margin-top: 10px;
    }

    .workItem{
        color: #222222;
        padding: 0px 10px;
        font-size: 12px;
        border: 1px solid #adb3fb;
        border-radius: 40px;
        margin: 5px 5px 5px 5px;
        transition: .5s;
        cursor: pointer;
    }

    .categoryName{
        font-size: 14px;
    }
    .allSpan{
        margin-left: 10px;
    }
</style>